﻿<!DOCTYPE html>
<html>
<head>
    <title>TreeView - Selection Events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treeview.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treeview.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeViewService", function($scope, $timeout, $treeService){
				$scope.treeName = "treeSample";
				$scope.data = [];

				var flatList = [
					{ "id": "1", "text": "Dairy" },
					{ "id": "11", "pid": "1", "text": "Milk" },
					{ "id": "12", "pid": "1", "text": "Butter" },
					{ "id": "13", "pid": "1", "text": "Cheese" },
					{ "id": "14", "pid": "1", "text": "Yogurt" },
					{ "id": "2", "text": "Fruits" },
					{ "id": "21", "pid": "2", "text": "Berries", "isExpanded": false },
					{ "id": "211", "pid": "21", "text": "BlackBerries" },
					{ "id": "212", "pid": "21", "text": "CranBerries" },
					{ "id": "213", "pid": "21", "text": "StrawBerries" },
					{ "id": "22", "pid": "2", "text": "Pits" },
					{ "id": "23", "pid": "2", "text": "Core" },
					{ "id": "24", "pid": "2", "text": "Citrus Fruits", "isExpanded": false },
					{ "id": "241", "pid": "24", "text": "Oranges" },
					{ "id": "242", "pid": "24", "text": "Lemons" },
					{ "id": "25", "pid": "2", "text": "Melons" },
					{ "id": "26", "pid": "2", "text": "Tropical Fruits" },
					{ "id": "261", "pid": "26", "text": "Avocados" },
					{ "id": "262", "pid": "26", "text": "Bananas" },
					{ "id": "263", "pid": "26", "text": "Dates" },
					{ "id": "3", "text": "Grains" },
					{ "id": "4", "text": "Meat" },
					{ "id": "41", "pid": "4", "text": "Beef" },
					{ "id": "42", "pid": "4", "text": "Lamb", "isExpanded": false },
					{ "id": "421", "pid": "42", "text": "Lamb Breast" },
					{ "id": "422", "pid": "42", "text": "Lamb Leg" },
					{ "id": "423", "pid": "42", "text": "Lamb Ribs" },
					{ "id": "43", "pid": "4", "text": "Pork" },
					{ "id": "5", "text": "Sweets" },
					{ "id": "6", "text": "Vegetables" },
					{ "id": "7", "text": "Water"}
				]
				
				$scope.dataFields = {
					id : 'id',
					pid : 'pid',
					text : 'text',
					expanded: 'isExpanded'
				}
	
				var initTimer = $timeout(function(){
					$treeService.loadData($scope.treeName, flatList, null, $scope.dataFields);

					$timeout.cancel(initTimer);
				}, 1);
			
				$scope.eventLog = [];
				
				$scope.onAfterSelect = function(e){
					$scope.eventLog.unshift({ name: "afterselect", info: " event was fired for item: " + e.item.text }); 
					$scope.$apply();
				}
				
				$scope.onBeforeSelect = function(e){
					var eventText = e.item.text;
					var isEventCancelled = false;

					if (e.item.pid == 1){
						isEventCancelled = true;

						eventText += '. Selection was cancelled.';
					}

					$scope.eventLog.unshift({ name: "beforeselect", info: " event was fired for item: " + eventText }); 
					$scope.$apply();

					if (isEventCancelled)
						return false;
				}
				
				$scope.onSelectionChanged = function(e){
					$scope.eventLog.unshift({ name: "selectionchanged", info: " event was fired when selection changes" }); 
					$scope.$apply();
				}
				
			    $scope.treeEvents = {
					afterSelect: function(e){
						return $scope.onAfterSelect(e);
					},
					beforeSelect: function(e){
						return $scope.onBeforeSelect(e);
					},
					selectionChanged: function(e){
						return $scope.onSelectionChanged(e);
					}
			    }

				$scope.clearEventLog = function(){
					$scope.eventLog.length = 0;
				}
			}]);
    </script>
    <style type="text/css">
		.event-block
		{
			background: white;
			border: thin solid gray;
			border-radius:3px;
			width: 450px;
			height: 405px;
		}
		.event-log
		{
			list-style-type: none;
			margin: 2px 0 0 0;
			padding: 0;
			height: 375px;
			overflow: auto;
		}
		.event-log li
		{
			padding-left: 15px;
		}
		.event-log li > span
		{
			color: #c60d0d;
		}
        .directive
        {
        	width: 400px;
        }
    </style>
</head>
<body oncontextmenu="return false;">
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">TreeView / Selection Events</h2>
	        <div class="feature-content" style="width:850px">
                <iui-treeview name="{{treeName}}" class="directive" items="data" events="treeEvents"></iui-treeview>
                <div class="control-panel" style="width:400px;">
                    <div class="event-block">
						<button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>
						<p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
                        <ul class="event-log">
							<li ng-repeat="ev in eventLog"><span>{{ev.name}}</span>{{ev.info}}</li>
						</ul>
                    </div>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample presents how to handle selection events in TreeView directive, AngularJS. Whenever an item is selected, the following events are fired:</p>
                     <ul class="feature-points">
                        <li><span style="color:#c60d0d">afterSelect</span> - Occurs after item is selected</li>
                        <li><span style="color:#c60d0d">beforeSelect</span> - Occurs before item is selected</li>
                        <li><span style="color:#c60d0d">selectionChanged</span> - Occurs when selection changes</li>
                    </ul>
                    <p><span class="initial-space"></span>By handling beforeSelect event you can prevent items from becoming selected, based on custom conditions set in your code. In our example, whenever child items under 'Dairy' category are clicked, the selection process is cancelled.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
